<template>
	<div class="layout-padding">
		<HyTabTable
			:searchFields="searchFields"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="HyTabTableRef"
			:searchButtonConfig="{
				span: 4,
				offset: 1,
			}"
			:tabls="tabls"
			@handleClick="handleClick"
		>
			<!-- <template #tableHeader>
				<el-button type="primary" @click="handleAdd" icon="Plus">添加三张清单</el-button>
				<el-button type="primary" plain @click="handleAdd" icon="download">导出</el-button>
			</template> -->
			<template #operation>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="{ row }">
						<el-button text type="primary" icon="View" @click="showDetails(row)">查看</el-button>
						<el-button text type="primary" icon="Clock" @click="closeDialog">历史版本</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTabTable>
	</div>
	<Dialog :dialogTitle="dialogTitle" :tableColumns="gridDataHead" :gridData="gridData" :dialogTableVisible="dialogTableVisibleF" @closeDialog="closeDialog"></Dialog>
</template>

<script lang="ts" setup>
import HyTabTable from '/@/components/HyTabTable/index.vue';
import Dialog from '../dialog/index.vue'
import type { TabsPaneContext } from 'element-plus';
const tabls = computed(() => {
	return {
		tablesList: [
			{
				lable: '开发项目',
				value: 1,
			},
			{
				lable: '运维项目',
				value: 2,
			},
		],
	};
});
const tableColumns = computed(() => {
	return [
		{ prop: 'applyId', label: '数字化应用编号' },
		{ prop: 'businessName', label: '数字化应用名称' },
		{ prop: 'copyTypeName', label: '所属领域' },
		{ prop: 'isReadName', label: '责任部门' },
		{ prop: 'applyCreateName', label: '应用牵头部门(专题组组长单位)' },
		// { prop: 'createTime', label: '专题组组长单位' },
		{ prop: 'createTime', label: '申报时间' },
		// { prop: 'createTime', label: '不通过次数' },
		{ prop: 'createTime', label: '状态' },
	];
});
//将数据单独存一份
const defaultData = ref([
	{
		applyId: '001',
		businessName: '清单1',
		copyTypeName: '类型A',
		isReadName: '领域X',
		applyCreateName: '部门A',
		createTime1: '单位A',
		createTime2: '2022-10-15',
		createTime3: 0,
		createTime4: '已批准',
	},
	{
		applyId: '002',
		businessName: '清单2',
		copyTypeName: '类型B',
		isReadName: '领域Y',
		applyCreateName: '部门B',
		createTime1: '单位B',
		createTime2: '2022-09-20',
		createTime3: 1,
		createTime4: '已拒绝',
	},
	{
		applyId: '003',
		businessName: '清单3',
		copyTypeName: '类型C',
		isReadName: '领域Z',
		applyCreateName: '部门C',
		createTime1: '单位C',
		createTime2: '2022-11-05',
		createTime3: 2,
		createTime4: '待处理',
	},
	{
		applyId: '004',
		businessName: '清单4',
		copyTypeName: '类型A',
		isReadName: '领域X',
		applyCreateName: '部门D',
		createTime1: '单位D',
		createTime2: '2022-08-10',
		createTime3: 0,
		createTime4: '已批准',
	},
	{
		applyId: '005',
		businessName: '清单5',
		copyTypeName: '类型D',
		isReadName: '领域W',
		applyCreateName: '部门E',
		createTime1: '单位E',
		createTime2: '2022-07-25',
		createTime3: 1,
		createTime4: '已拒绝',
	},
]);
const tableConfig = ref({
	request: null,
	showSearch: true,
	title: '资金需求申报-开发项目',
	defaultData: defaultData, //赋值
});
//tab切换时改变defaultData值
const tableConfigData = computed({
	get: () => {
		return defaultData.value;
	},
	set: (val) => {
		defaultData.value = val;
	},
});
// 配置搜索
const searchFields = computed(() => {
	return {
		changeDialog: {
			type: 'dropdown',
			lable: '新增项目',
			options: [
				{
					label: '开发项目',
					value: '1',
				},
				{
					label: '运维项目',
					value: '2',
				},
				{
					label: '基础设施类项目',
					value: '3',
				},
			],
		},
		applyId: {
			type: 'input',
			label: '关键字',
		},
		copyType: {
			type: 'select',
			label: '状态',
			options: [
				{
					label: '待申报',
					value: '1',
				},
				{
					label: '已申报',
					value: '2',
				},
			],
		},
		signTimeQuery: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '申报时间',
		},
	};
});
//查看
const router = useRouter();
const showDetails = (row: any) => {
	console.log(row);

	router.push({
		path: '../detail/demandDeclaration',
		// query: {
		// 	id: row.applyId,
		// },
	});
};

//接收tab值调用接口
const handleClick = (tab: TabsPaneContext) => {
	if (tab == 1) {
		defaultData.value = [
			{
				applyId: '001',
				businessName: '清单1',
				copyTypeName: '类型A',
				isReadName: '领域X',
				applyCreateName: '部门A',
				createTime1: '单位A',
				createTime2: '2022-10-15',
				createTime3: 0,
				createTime4: '已批准',
			},
		];
	}
	else{
		defaultData.value =[
			{
				applyId: '001',
				businessName: '清单1',
				copyTypeName: '类型A',
				isReadName: '领域X',
				applyCreateName: '部门A',
				createTime1: '单位A',
				createTime2: '2022-10-15',
				createTime3: 0,
				createTime4: '已批准',
			},
			{
				applyId: '002',
				businessName: '清单2',
				copyTypeName: '类型B',
				isReadName: '领域Y',
				applyCreateName: '部门B',
				createTime1: '单位B',
				createTime2: '2022-09-20',
				createTime3: 1,
				createTime4: '已拒绝',
			},
			{
				applyId: '003',
				businessName: '清单3',
				copyTypeName: '类型C',
				isReadName: '领域Z',
				applyCreateName: '部门C',
				createTime1: '单位C',
				createTime2: '2022-11-05',
				createTime3: 2,
				createTime4: '待处理',
			},
			{
				applyId: '004',
				businessName: '清单4',
				copyTypeName: '类型A',
				isReadName: '领域X',
				applyCreateName: '部门D',
				createTime1: '单位D',
				createTime2: '2022-08-10',
				createTime3: 0,
				createTime4: '已批准',
			},
			{
				applyId: '005',
				businessName: '清单5',
				copyTypeName: '类型D',
				isReadName: '领域W',
				applyCreateName: '部门E',
				createTime1: '单位E',
				createTime2: '2022-07-25',
				createTime3: 1,
				createTime4: '已拒绝',
			},
		]
	}
};
//弹窗相关数据
const dialogTableVisibleF=ref(false)
const dialogTitle=ref('历史数据')
const gridDataHead = computed(() => {
	return [
		{ prop: 'date', label: '创建时间' },
	];
});
const gridData = [
  {
    date: '2016-05-02',
  }
]
const closeDialog=()=>{
	dialogTableVisibleF.value=!dialogTableVisibleF.value
}
</script>
<style scoped lang="scss"></style>
